import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import { Form, Button } from 'antd';
import FormCondition from '@/components/FormCondition';
import FlxButton from '@/components/FlxButton'
import { InfoCircleOutlined } from '@ant-design/icons'
import { Row, Col, Card, Switch, Statistic, Tooltip, Space } from 'antd'
const promotion = (props) => {
    const { dispatch, reload } = props;
    const [data, setData] = useState({})
    const [content, setContent] = useState(''); // 输入的富文本内容
    const [form] = Form.useForm();

    const { id } = data
    const fetchRoleEdit = () => {
        form.validateFields().then((values) => {
            dispatch({
                type: 'promoter/fetchPromofakeSavePromoterConfigterWebPage',
                payload: {
                    ...values,
                    id
                },
                callback: () => {
                    fetchData()
                }
            })
        });
    };
    const fetchData = () => {
        dispatch({
            type: 'promoter/fetchPromoterConfigDetail',
            callback: (e) => {
                const { bindFailNotify, id } = e
                setData({
                    bindFailNotify, id
                })

            }
        })
    }

    useEffect(() => {
        fetchData()
    }, [])
    const formItemLayout = {
        labelCol: {
            sm: { span: 0 },
        },
        wrapperCol: {
            sm: { span: 0 },
        },
    };

    const formItems = [
        {
            label: <Space>
                <div>绑定失败通知</div>
                <Tooltip title={<div>
                    <div>绑定失败的情况包含：</div>
                    <div>1. 客户已被其他推广员绑定且当前不可抢客 - 客户重复点击/扫码，24小时内仅给推广员发送1次；</div>
                    <div>2. 客户被其他推广员抢走 - 客户每次解绑时给推广员发送1次。</div>
                </div>}>
                    <InfoCircleOutlined></InfoCircleOutlined>
                </Tooltip>
            </Space>,
            name: 'bindFailNotify',
            type: 'radio',
            select: {
                0: '关闭',
                1: '开启'
            },
            extra: <div style={{ color: '#999' }}>开启后，该通知仅发送给推广员，不会发送给客户</div>
        },
    ]



    return (
        <Row >
            <Col span={12}>
                <div style={{ paddingTop: 12 }}>
                    <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems} initialValues={data}></FormCondition>
                </div>
            </Col>
            <FlxButton onOk={fetchRoleEdit}></FlxButton>
        </Row>


    );
};

export default connect(({ institution, loading }) => ({
    loading: loading.models.institution,
}))(promotion);
